<!-- 购物车 -->
<template>
	<view class="cart">
		<view class="cart_content">
			<view class="list">
				<template v-if="cart_group">
					<u-swipe-action class="cart_swipe_action" :show="item.show" :index="index" v-for="(item, index) in cart_group"
					 :key="item.id" @click="click" @open="open" @close="close" :options="options" btn-width="120">
						<view class="cart_card" :class="{'change_card' : item.show}">
							<view class="cart_left">
								<view class="left_check">
								<vCheckBoxGroup @change="checkboxGroupChange" size="40">
									<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.name" shape="circle" icon-size="30rpx"
									 active-color="#FF5445">{{item.name}}</u-checkbox>
								</vCheckBoxGroup>
								</view>
								<image :src="item.img" alt mode="aspectFit" class="cart_photo"></image>
							</view>
							<view class="cart_right">
								<view class="cart_title">
									<p>{{ item.title }}</p>
									<span>{{ item.price }}积分</span>
								</view>
								<view class="card_calculation">
									<number-box v-model="item.value" min="1" bg-color="#fff" input-width="48" color="#BBBBBB" max="99" size="40rpx"
									 @change="valChange" :index="index"></number-box>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</template>
			</view>
			<view class="cart_bottom">
				<view class="bottom_left">
					<!-- @click="checkedAll" -->
					<vButton class="cart_btn" shape="circle" size="mini" type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
					</vButton>
					<p>已选({{ count }})</p>
				</view>
				<view class="bottom_right">
					<span>{{ sum }}积分</span>
					<view class="swap">
						<view class="swap_text" @click="toOrder">立即兑换</view>
					</view>
				</view>
			</view>
		</view>
		<!-- </view> -->
		<buttom-tabbar></buttom-tabbar>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import vButton from "pages/cart_index/components/v-button.vue";
	import vCheckBoxGroup from "pages/cart_index/components/v-checkbox-group.vue";
	export default {
		components: {
			vButton,
			vCheckBoxGroup,
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF5445',
					}
				}],
				disabled: false,
				show: false,
				value: 1,
				checked: false,
				cart_group: [{
						id: 1,
						img: "/static/img/1.png",
						title: "九阳迷你形家用电磁炉三年全国保修",
						text: "8800积分",
						select: "/static/img/common_ic_12_selected.png",
						price: 1,
						value: 1,
						name: '',
						checked: false,
						disabled: false,
						show: false,
					},
					{
						id: 2,
						img: "/static/img/1.png",
						title: "九阳迷你形家用电磁炉三年全国保修",
						text: "8800积分",
						select: "/static/img/common_ic_12_selected.png",
						price: 2,
						value: 1,
						name: '',
						checked: false,
						disabled: false,
						show: false,
					},
					{
						id: 3,
						img: "/static/img/1.png",
						title: "九阳迷你形家用电磁炉三年全国保修",
						text: "8800积分",
						select: "/static/img/common_ic_12_selected.png",
						price: 3,
						value: 1,
						name: '',
						checked: false,
						disabled: false,
						show: false,
					},
					{
						id: 4,
						img: "/static/img/1.png",
						title: "九阳迷你形家用电磁炉三年全国保修",
						text: "8800积分",
						select: "/static/img/common_ic_12_selected.png",
						price: 4,
						value: 1,
						name: '',
						checked: false,
						disabled: false,
						show: false,
					},

				],
				count: 0, // 已选的数量
				sum: 0, // 已选的数量,
				sum_list: [],
				btncount: 1,// 步进器值
				numbox: -1, //步进器下标
			};
		},
		watch: {
			goods_store(val) {
				// console.log(val, 'val')
			}
		},
		computed: {
			...mapState({
				sum_store: state => state.order.sum,
				goods_store: state => state.order.goods,
			})
		},
		methods: {
			// 订单跳转
			toOrder() {
					uni.navigateTo({
						url: "/pages/order/index"
					})
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {  //复选框
			// console.log(this.numbox,'22')
				this.sumTotal();
			},
			sumTotal() {  //计算价格
				let count = 0;
				let sum = 0;
				let goods = [];
				this.cart_group.map((item, index) => {
					if (item.checked) {
						count++;
						// console.log(this.cart_group[index].price,'price');
						// console.log(this.btncount,'ssssss');
						this.sum_list[this.numbox] = this.cart_group[index].price * this.btncount;
						sum += this.sum_list[index];
						goods.push(item)
					}
				})
				this.count = count;
				this.sum = sum;
				// console.log(this.sum,'sum')
				this.$store.dispatch('order/get_sum', this.sum)
				this.$store.dispatch('order/get_goods', goods)
			},
			click(index) {
				this.cart_group.splice(index, 1);
				this.$u.toast(`删除了第${index+1}个商品`);
				this.sumTotal();
			},
			valChange(e) {  // 步进器
				this.btncount = e.value;  //步进器值
				this.numbox = e.index;   //步进器下标
				// console.log(this.numbox,'i')
				// console.log(this.btncount,'btn')
				this.sumTotal();
				this.$store.dispatch('order/get_sum', this.sum)
			},
			// 全选
			checkedAll(e) {
				this.cart_group.map(val => {
					if (val.checked) {
						val.checked = false;
					} else {
						val.checked = true
					}
				})
			},
			checkboxChange(e) {},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.cart_group[index].show = true;
				for (let i = 0; i < this.cart_group.length; i++) {
					if (i !== index) {
						this.cart_group[i].show = false;
					}
				}
			},
			close(index) {
				this.cart_group[index].show = false;
			}
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {
			for (let i = 0; i < this.cart_group.length; i++) {
				this.sum_list.push(this.cart_group[i].price)
			} 
			// console.log(this.sum_list,'sum')
			//页面渲染完之后，选中任一checkbox时，由checkbox-group触发，将cart_group选择的索引下标值的价格添加进去vuex
		},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>
